import { useState, useEffect } from 'react';

// 获取系统主题
const useMediaColor = (followTheme: boolean) => {
  const [dark, setDark] = useState<boolean>(false);

  const handleThemeChange = (event: MediaQueryListEvent) => {
    setDark(event.matches);
  };

  useEffect(() => {
    if (!followTheme) return;
    const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
    if (!mediaQueryList) return;
    mediaQueryList.addEventListener('change', handleThemeChange);
    return () => {
      mediaQueryList.removeEventListener('change', handleThemeChange);
    };
  }, [followTheme]);
  return dark;
};

export default useMediaColor;
